<script setup>
import { ref } from "vue";
import { useLogin } from "@/hooks/login-hook";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import C from "@/components/C";
import Indexdb from "@/utils/indexdb";
import { Toast } from "vant";

const db = new Indexdb("qq");

const store = useStore();
const router = useRouter();

const qq = ref("");
const show = ref(false);

const loginHandler = () => useLogin(store, router, show, qq);

const clearCache = async () => {
  if (localStorage.getItem("qq")) {
    const id = (await db.selectAll("chat_record"))[0]?.id;
    if(id){
      db.delete("chat_record",id);    
      store.dispatch("notify/setNowChats",[])
      Toast("清除成功")
      // location.reload();
    }else{
      Toast("暂无缓存数据")
    }
  }
};
</script>

<template>
  <div id="login">
    <C.Overlay :show="show" text="登录中..." />
    <br />
    <van-cell-group inset>
      <van-field v-model="qq" placeholder="请输入QQ号" />
    </van-cell-group>
    <div style="padding: 10px">
      <van-button size="large" type="primary" @click="loginHandler">
        登录账号
      </van-button>
    </div>
    &nbsp;&nbsp;
    <router-link to="/register"> 注册用户 </router-link>
    <button @click="clearCache" > 清除缓存 </button>
  </div>
</template>

<style lang="scss" scoped></style>
